<template>
  <div class="chart6">
    <div id="chart6">

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts-gl');


export default {
  name: 'HelloWorld',
  data () {

    return {
        option : {
            backgroundColor: '#000',
            globe: {
                baseTexture: 'http://localhost:8081/asset/world.jpg',
                heightTexture: 'http://localhost:8081/asset/world.jpg',
                displacementScale: 0.04,
                shading: 'realistic',
                // environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0, color: '#00aaff' // 天空颜色
                //     }, {
                //     offset: 0.7, color: '#998866' // 地面颜色
                //     }, {
                //     offset: 1, color: '#998866' // 地面颜色
                //     }], false),
                environment:'http://localhost:8081/asset/starfield.jpg',
                realisticMaterial: {
                    roughness: 0.9
                },
                postEffect: {
                    enable: true
                },
                light: {
                    main: {
                        intensity: 5,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: 'http://localhost:8081/asset/pisa.hdr',
                        diffuseIntensity: 0.2
                    }
                }
            }
        }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      var box = echarts.init(document.getElementById('chart6'));
      box.setOption(this.option);
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.chart6{
  width:100%;
  height:100vh;
  
}
#chart6{
    width:100%;
    height:100%;
  }
</style>
